<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>

<body>
  <h1>通过jq发送get形式的ajax</h1>
  <button class="btn1">发送ajax1</button>
  <button class="btn2">发送ajax2</button>
  <script>
    // 通过jq发送get形式的ajax
    // 发送方式一
    $(".btn1").on("click", function () {
      console.log("点击了按钮1");
      // $.get("请求的地址",{携带到服务端的数据},cb是返还的结果调用函数,对于返还结果的处理默认是json)
      $.get("/getdata", { myname: "chengyu", age: 22 }, res => {
        // 回调里可以接受后端返还结果值
        console.log(res);
      }, "json")
    })

    // 发送方式二
    $(".btn2").on("click", () => {
      $.ajax({
        url: "/getajax", // 请求的地址
        data: {   // 需要携带到服务端的数据
          myname: "chenyu",
          age: 20
        },
        dataType: "json",  // 对于返还结果的处理
        method: "get",    // 设置请求的方式 ，默认就是get形式
        success: res => {
          console.log(res);
        }
      })
    })

  </script>
</body>

</html>